<template>
  <div class='container'>
    <el-card class='card-container'>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字">
              <el-input v-model="form.name" style="width:50%" placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-form-item class="btn">
              <el-button @click="clearStatus">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <my-table
        :table-props="{
            data: questionRandomList.items,
            border: false
          }"
        :columns="[
            { label: '编号', prop: 'id', width: 180, align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题目编号', prop: 'id', align: 'center' },
            { label: '录入时间', prop: 'addTime', align: 'center' },
            { label: '答题时间(s)', prop: 'totalSeconds', align: 'center' },
            { label: '正确率(%)', prop: 'accuracyRate', align: 'center' },
            { label: '录入人', prop: 'userName', align: 'center' },
            { label: '操作', slotName: 'operators', align: 'center', fixed: 'right' },
          ]"
        :pagination-props="{
            pageSizes: [20, 30, 50, 100],
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: questionRandomList.counts
          }"
        :pagination-events="events"
      >
        <template v-slot:question="scope">
          <div v-html="scope.row.question"></div>
        </template>
        <template v-slot:questionType="scope">
          {{scope.row.questionType == 1 ? '单选': (scope.row.questionType == 2? '多选': '简答')}}
        </template>
        <template v-slot:operators="scope">
          <el-button type="danger" size="small" @click="onDelClick(scope.row)" circle plain><i class="el-icon-delete" /></el-button>
        </template>
      </my-table>
    </el-card>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { delModule } from '@/store/utils/delUtils'
import * as questionApi from '@/api/hmmm/questions'
import { removeRandoms } from '@/api/hmmm/questions'


export default {
  name: 'QuestionsRandoms',
  data () {
    return {
      currentPage: {
        page: 1,
        pagesize: 20
      },
      events: {
        'current-change': this.onCurrentPageChange
      },
      form: {
        name: ''
      }
    }
  },
  computed: {
    ...mapState('questions', ['questionRandomList']),

  },
  methods: {
    ...mapActions('questions', ['updateQuestionRandomList']),
    onCurrentPageChange (currentPage) {
      this.currentPage.page = currentPage
      this.updateQuestionRandomList(this.currentPage)
    },
    // 清除
    clearStatus () {
      this.form.name = ''
    },
    // 搜索
    onSearch () {
      this.updateQuestionRandomList({
        ...this.currentPage,
        keyword: this.form.name
      })
    },
    // 删除
    async onDelClick (data) {
      await delModule(questionApi.removeRandoms, '组题', { id: data.id })
      this.updateQuestionRandomList(this.currentPage)
    }
  },
  created () {
    this.updateQuestionRandomList(this.currentPage)
  }
}
</script>

<style scoped lang='scss'>
.card-container{
  margin: 16px;
}
</style>
